<template>
  <div class="app-container home">
    <div class="search">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="">
          <el-date-picker
              v-model="queryParams.dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleChangeDate"
          ></el-date-picker>
<!--          <el-date-picker
              v-model="queryParams.endDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="截止日期">
          </el-date-picker>-->
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="main">
      <div class="left">
        <el-row :gutter="5">
          <el-col :xs="24" :sm="24" :md="12" :lg="6">
            <el-card class="update-log" shadow="hover" v-loading="wkordStatusLoading">
              <div slot="header" class="clearfix">
                <el-statistic title="工单金额"  group-separator="," :precision="2" :value="sumWkorderMoney">
                  <template slot="prefix">
                    <i class="el-icon-s-flag" style="color: red"></i>
                  </template>
                </el-statistic>
              </div>
              <div class="body el-table el-table--enable-row-hover el-table--medium"><!-- style="height:150px;overflow:auto" -->
                <table cellspacing="0" style="width: 100%;">
                  <tbody>
                  <tr v-for="(item,index) in wkordStatusList" :key="index">
                    <td class="el-table__cell is-leaf"><div class="cell">{{item.workStatusName}}</div></td>
                    <td class="el-table__cell is-leaf"><div class="cell">{{item.workPrice}}</div></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="6">
            <el-card class="update-log" shadow="hover" v-loading="wkordStatusLoading">
              <div slot="header" class="clearfix">
                <el-statistic title="工单数量">
                  <template slot="formatter"> {{sumWkorderNum}} </template>
                  <template slot="prefix">
                    <i class="el-icon-s-flag" style="color: red"></i>
                  </template>
                </el-statistic>
              </div>
              <div class="body el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%;">
                  <tbody>
                  <tr v-for="(item,index) in wkordStatusList" :key="index">
                    <td class="el-table__cell is-leaf"><div class="cell">{{item.workStatusName}}</div></td>
                    <td class="el-table__cell is-leaf"><div class="cell">{{item.orderNum}}</div></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="6">
            <el-card class="update-log" shadow="hover" v-loading="workerStatusLoading">
              <div slot="header" class="clearfix">
                <el-statistic title="师傅数量">
                  <template slot="formatter"> {{sumWorkerNum}} </template>
                  <template slot="prefix">
                    <i class="el-icon-s-flag" style="color: red"></i>
                  </template>
                </el-statistic>
              </div>
              <div class="body el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%;">
                  <tbody>
                  <tr v-for="(item,index) in workerStatusList" :key="index">
                    <td class="el-table__cell is-leaf"><div class="cell">{{item.auditStatusName}}</div></td>
                    <td class="el-table__cell is-leaf"><div class="cell">{{item.total}}</div></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="6">
            <el-card class="update-log" shadow="hover" v-loading="pdrStatusLoading"><!-- style="height:450px"-->
              <div slot="header" class="clearfix">
                <el-statistic title="厂商数量">
                  <template slot="formatter"> {{sumPdrNum}} </template>
                  <template slot="prefix">
                    <i class="el-icon-s-flag" style="color: red"></i>
                  </template>
                </el-statistic>
              </div>
              <div class="body el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%;">
                  <tbody>
                  <tr v-for="(item,index) in pdrStatusList" :key="index">
                    <td class="el-table__cell is-leaf"><div class="cell">{{item.auditStatusName}}</div></td>
                    <td class="el-table__cell is-leaf"><div class="cell">{{item.total}}</div></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-divider />

        <el-row>
          <el-col :span="24">
            <el-card class="update-log" shadow="hover" v-loading="wkordDataLoading">
              <div slot="header" class="clearfix">
                <span>工单数据</span>
              </div>
              <div class="body el-table el-table--enable-row-hover el-table--medium">
                <div ref="wkordData" style="height:400px;" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <el-divider direction="vertical" content-position="center"></el-divider>

      <div class="right">
        <el-row :gutter="5">
          <el-col :span="24">
            <el-card class="update-log" shadow="hover" v-loading="cityLoading">
              <div slot="header" class="clearfix">
                <span>TOP</span>
                <span style="text-align: right">{{queryParams.endDate}}</span>
              </div>
              <div class="body">
                <el-table
                    v-loading="false"
                    :data="cityList"
                    highlight-current-row
                    style="width: 100%"
                >
                  <el-table-column
                      label="排名"
                      type="index"
                      width="48"
                  ></el-table-column>

                  <el-table-column
                      label="省市"
                      align="center"
                      prop="province"
                      width="70"
                  ></el-table-column><!--  :show-overflow-tooltip="true" -->
                  <el-table-column
                      label="统计值"
                      align="center"
                      prop="orderNum"
                      width="70"
                      :show-overflow-tooltip="true"
                  ></el-table-column>
                  <el-table-column
                      label="涨幅"
                      align="center"
                      prop="incNum"
                      width="48"
                      :show-overflow-tooltip="true"
                  ></el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>


  </div>
</template>

<script>

import {
  cityTopByDateRange,
  pdrStatusByDateRange, wkOrdDateByDateRange,
  wkordStatusByDateRange,
  workerStatusByDateRange
} from "@/api/wkorder/ststc";
import * as echarts from "echarts";
import {formatDateToStr} from "@/api/utils/dateUtil";

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.5",
      // 查询参数
      queryParams:{
        dateRange:undefined,
        startDate:undefined,
        endDate:undefined,
      },
      wkordStatusLoading:false,
      workerStatusLoading:false,
      pdrStatusLoading:false,
      cityLoading:false,
      wkordDataLoading:false,
      //工单状态
      wkordStatusList:[],
      //师傅状态
      workerStatusList:[],
      //师傅状态
      pdrStatusList:[],
      cityList:[],
      wkordData: null,
    };
  },
  created() {
    this.queryParams.endDate=new Date();
    this.queryParams.endDate.setDate(new Date().getDate() - 1);

    this.queryParams.endDate= formatDateToStr(this.queryParams.endDate,"yyyy-MM-dd");

    this.queryParams.startDate=new Date();
    this.queryParams.startDate.setDate(new Date().getDate() - 7);
    this.queryParams.startDate= formatDateToStr(this.queryParams.startDate,"yyyy-MM-dd");

    this.queryParams.dateRange=[this.queryParams.startDate,this.queryParams.endDate]
    console.log(this.queryParams.dateRange)
    this.handleQuery();

  },
  methods: {
    /*goTarget(href) {
      window.open(href, "_blank");
    }*/
    handleQuery(){
      if(!this.queryParams.endDate||!this.queryParams.startDate){
        this.$message.error("请录入查询日期");
        return
      }

      this.getWkorderStatus();
      this.getWorkerStatus();
      this.getPdrStatus();
      this.getCityTop();
      this.getWkOrdData();
    },
    /** 查询工单状态 */
    getWkorderStatus() {
      this.wkordStatusLoading = true
      wkordStatusByDateRange(this.queryParams).then(response => {
        this.wkordStatusList=response.data;
        this.wkordStatusLoading = false
      });
    },

    getWorkerStatus() {
      this.workerStatusLoading=true;
      workerStatusByDateRange(this.queryParams).then(response => {
        this.workerStatusList=response.data;
        this.workerStatusLoading=false;
      });
    },

    getPdrStatus() {
      this.pdrStatusLoading=true;
      pdrStatusByDateRange(this.queryParams).then(response => {
        this.pdrStatusList=response.data;
        this.pdrStatusLoading=false;
      });
    },

    getCityTop(){
      this.cityLoading=true;
      let data={ststcDate:this.queryParams.endDate}
      cityTopByDateRange(data).then(response => {
        this.cityList=response.data;
        this.cityLoading=false;
      });
    },
    getWkOrdData(){
      this.wkordDataLoading=true;
      //let query={endDate:this.queryParams.endDate}
      wkOrdDateByDateRange(this.queryParams).then(response => {
        this.wkordDataLoading=false;

        let resultList=response.data;

        let data = [];//const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
        let maxNum=0;
        for(let index in resultList){
          let item=resultList[index];
          let arry=[];
          arry.push(item.ststcDate)
          arry.push(item.orderNum)
          if(maxNum<item.orderNum){
            maxNum=item.orderNum;
          }
          data.push(arry)
        }

        const dateList = data.map(function (item) {
          return item[0];
        });
        const valueList = data.map(function (item) {
          return item[1];
        });
        this.wkordData = echarts.init(this.$refs.wkordData, "macarons");
        this.wkordData.setOption({
          // Make gradient line here
          visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: maxNum
            }
          ],
          title: [
            {
              left: 'left',
              text: ''
            }
          ],
          legend: {
            data: ['工单总数']
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              data: dateList
            }
          ],
          yAxis: [
            {}
          ],
          grid: [
            {
              bottom: '10%'
            }
          ],
          series: [
            {
              name:"工单总数",
              type: 'line',
              showSymbol: true,//曲线上展示点
              data: valueList,
              smooth: true,//平滑曲线
            }
          ]
        });

      });

    },
    /**
     * 日期改变触发
     * @param value
     */
    handleChangeDate(value){
      if(value){
        this.queryParams.startDate=value[0];
        this.queryParams.endDate=value[1];
      }else{
        this.queryParams.startDate=undefined;
        this.queryParams.endDate=undefined;
      }
    },
  },
  computed:{
    sumWkorderMoney: function(){
      let sum=0;
      for(let i=0;i<this.wkordStatusList.length;i++){
        sum=sum+Number(this.wkordStatusList[i].workPrice)
      }
      return sum;
    },

    sumWkorderNum(){
      let sum=0;
      for(let i=0;i<this.wkordStatusList.length;i++){
        sum=sum+Number(this.wkordStatusList[i].orderNum)
      }
      return sum;
    },
    sumWorkerNum(){
      let sum=0;
      for(let i=0;i<this.workerStatusList.length;i++){
        sum=sum+Number(this.workerStatusList[i].total)
      }
      return sum;
    },
    sumPdrNum(){
      let sum=0;
      for(let i=0;i<this.pdrStatusList.length;i++){
        sum=sum+Number(this.pdrStatusList[i].total)
      }
      return sum;
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
/**************/
.update-log{
  .clearfix{
    font-weight: bold;
    display: flex;
    span{
      flex: 1;
    }
  }
}
.home{
  .search{
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 10px;
    /*text-align: right;*/
  }
  .main{
    display:flex;
    ::v-deep.el-card__body{
      padding-left:5px;
      padding-right:5px;
    }
    .left{
      /*width:80%*/
      flex: 1;
    }

    ::v-deep.el-divider--vertical{
      height: auto;
    }
    .right{

    }
  }

}


</style>

